import React from 'react';
import { Button, Space, Card, Row, Col } from 'antd';
import { notification } from './Notification';
import { useThemeStore } from '../../stores/themeStore';
import { getTheme } from '../../theme/config';

const NotificationDemo: React.FC = () => {
  const { mode } = useThemeStore();
  const theme = getTheme(mode);

  const showSuccess = () => {
    notification.success({
      title: '操作成功',
      message: '您的操作已成功完成',
      duration: 4500
    });
  };

  const showError = () => {
    notification.error({
      title: '操作失败',
      message: '操作过程中发生了错误，请稍后重试',
      duration: 0 // 不自动关闭
    });
  };

  const showWarning = () => {
    notification.warning({
      title: '警告',
      message: '请注意，某些设置可能会影响系统性能',
      duration: 3000
    });
  };

  const showInfo = () => {
    notification.info({
      title: '提示信息',
      message: '这是系统提供的相关信息',
      duration: 5000
    });
  };

  const showCustom = () => {
    notification.open({
      type: 'info',
      title: '自定义通知',
      message: '这是一个自定义的通知示例，可以包含更多信息',
      duration: 0,
      closable: true,
      onClose: () => {
        console.log('通知已关闭');
      }
    });
  };

  return (
    <div style={{ padding: '24px' }}>
      <h1 style={{ 
        color: theme.textPrimary, 
        marginBottom: '24px',
        background: `linear-gradient(90deg, ${theme.glowColor}, #ffffff)`,
        WebkitBackgroundClip: 'text',
        WebkitTextFillColor: 'transparent',
        fontWeight: 'bold'
      }}>
        通知组件演示
      </h1>
      
      <Row gutter={[24, 24]}>
        <Col span={24}>
          <Card 
            title="基础通知类型" 
            style={{ 
              background: theme.cardBackground,
              border: `1px solid ${theme.cardBorder}`,
              borderRadius: '12px',
              backdropFilter: 'blur(10px)'
            }}
          >
            <Space size="middle" wrap>
              <Button type="primary" onClick={showSuccess}>
                成功通知
              </Button>
              <Button danger onClick={showError}>
                错误通知
              </Button>
              <Button onClick={showWarning} style={{ backgroundColor: '#faad14', color: 'white', border: 'none' }}>
                警告通知
              </Button>
              <Button onClick={showInfo} style={{ backgroundColor: '#1890ff', color: 'white', border: 'none' }}>
                信息通知
              </Button>
            </Space>
          </Card>
        </Col>
        
        <Col span={24}>
          <Card 
            title="高级功能演示" 
            style={{ 
              background: theme.cardBackground,
              border: `1px solid ${theme.cardBorder}`,
              borderRadius: '12px',
              backdropFilter: 'blur(10px)'
            }}
          >
            <Space size="middle" wrap>
              <Button onClick={showCustom}>
                自定义通知
              </Button>
              <Button onClick={() => notification.destroy()}>
                清空所有通知
              </Button>
            </Space>
          </Card>
        </Col>
        
        <Col span={24}>
          <Card 
            title="使用说明" 
            style={{ 
              background: theme.cardBackground,
              border: `1px solid ${theme.cardBorder}`,
              borderRadius: '12px',
              backdropFilter: 'blur(10px)'
            }}
          >
            <div style={{ color: theme.textSecondary }}>
              <p>通知组件提供了四种基本类型的通知：</p>
              <ul>
                <li><strong>Success（成功）</strong>: 用于表示操作成功完成</li>
                <li><strong>Error（错误）</strong>: 用于表示操作失败或出现错误</li>
                <li><strong>Warning（警告）</strong>: 用于表示需要注意的警告信息</li>
                <li><strong>Info（信息）</strong>: 用于提供一般性的信息提示</li>
              </ul>
              <p>每个通知都可以设置：</p>
              <ul>
                <li><strong>Title</strong>: 通知的标题</li>
                <li><strong>Message</strong>: 通知的详细内容</li>
                <li><strong>Duration</strong>: 自动关闭的时间（毫秒），设置为0表示不自动关闭</li>
                <li><strong>Closable</strong>: 是否显示关闭按钮</li>
                <li><strong>OnClose</strong>: 关闭时的回调函数</li>
              </ul>
            </div>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default NotificationDemo;